﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>qrcode</title>
	<style id="pcuse" type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		#qrcode {
			width: 200px;
			height: 200px;
			margin: 20pt auto;
			display: block;
		}

		#attention {
			text-align: center;
			margin-top: 10%;
		}

		.center {
			text-align: center;
		}

		input[type=button] {
			border: none;
			background-color: #0185f2;
			width: 60pt;
			height: 25pt;
			border-radius: 5px;
			color: white;
			font-size: 12pt;
		}
	</style>
	<style type="text/css" id="phone">
		* {
			margin: 0px;
			padding: 0px;
		}

		#qrcode {
			width: 500px;
			height: 500px;
			margin: 20pt auto;
			display: block;
		}

		#attention {
			text-align: center;
			margin-top: 380pt;
			font-size: 40pt;
		}

		input[type=button] {
			-webkit-appearance: none;
			width: 230pt;
			height: 80pt;
			border-radius: 18pt;
			font-size: 30pt;
			background-color: #0185f2;
			color: white;
		}

		.center {
			text-align: center;
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		var deviceType =
			(function () {
				var userAgent = navigator.userAgent;
				if (userAgent.includes("Windows")) {
					return "pc";
				} else if (userAgent.includes("iPhone")
					|| userAgent.includes("Android")) {
					return "mobile";
				} else {
					return "pc";
				}
			})();
		(function () {
			//如果是手机, 跳到手机页面
			if (deviceType === "mobile") {
				$("#pcuse").remove();
			} else {
				$("#phone").remove();
			}
		})();
	</script>
	<script type="text/javascript" src="js/clipboard.min.js"></script>
	<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
	<body>
		<main>
			<div id="attention">{{ attention }}<span> {{ points }}</span></div>
			<div v-show="!past" id="qrcode"></div>
			<div v-show="past" id="getMsg" class="center">
				<input id="sure" type="button" value="获取" />
				<br /><br />
				<a :href="newPage" v-show="newPage"><input type="button" value="跳转" /></a>
			</div>
			<div v-show="!past" class="center"><a href="/index.html"><input type="button" value="返回首页" /></a></div>
		</main>
		<script type="text/javascript">
			/*
			 * localStorage: attention, fetch, qrcode, uuid
			 * sessionStorage: index
			 **/
			var main = new Vue({
				el: "main",
				data: {
					attention: localStorage.getItem("attention"),
					url: "http://" + location.hostname + localStorage.getItem("qrcode"),
                    points: ".",
					past: false,
					newPage: null
				}
			});

            if (deviceType == "mobile") {
                jQuery("#qrcode").qrcode({
                    render: "table",
                    text: main.url,
                    width: "500",
                    height: "500"
                });
            } else {
                jQuery("#qrcode").qrcode({
                    render: "table",
                    text: main.url,
                    width: "200",
                    height: "190"
                });
			};
			setInterval(function () {
				if (main.points.length < 3) {
					main.points += ".";
				} else {
					main.points = "";
                }
			}, 1000);

			if (localStorage.getItem("fetch") == "true") {
				//fetch,150s
				(function () {
					var timeout = 150;
					var timer = setInterval(function () {
						fetch("http://"
							+ location.hostname
							+ "/io?m=downLoad&random="
							+ parseInt(Math.random() * 8000)
							+ "&uuid=" + localStorage.getItem("uuid"))
						.then(function (response) {
							if (response.status == 200) {
								response.text().then(function (text) {
									if (text != "Error") {
                                        if (/^http:\/\/|^https:\/\//.test(text)) {
                                            main.newPage = text;
                                            setTimeout(
                                                function () {
                                                    main.attention = "点击获取内容或跳转到目标页面";
                                                },
                                                50
                                            );
                                        }
                                        var sure = document.querySelector("#sure");
                                        new ClipboardJS(sure, {
                                            text: function () {
                                                return text;
                                            }
										});
										sure.onclick = function () {
											setTimeout(function () {
												main.attention = "已经获取内容到剪贴板,即将返回首页";
												setTimeout(function () {
													location.href = "http://" + location.hostname;
												}, 3000);
											}, 500);
										};
										main.attention = "点击获取内容";
										main.past = true;
										clearInterval(timer);
                                    }
								});
                            }
						});
						timeout--;
						if (timeout <= 0) {
							clearInterval(timer);
							alert("请求超时,请重新上传...");
							location.href = "index.html";
                        }
					}, 1000);
				})();
            }
		</script>
	</body>
</html>
